<template>
  <div class="detail-swiper">
    <van-swipe :autoplay="3000" lazy-render class="swiper">
      <van-swipe-item class="swiper-item" v-for="(image, index) in swipeData" :key="index">
        <img :src="image.url" />
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="indicator">
          <template v-for="(value, key, index) in swipeGroup" :key="key">
            <span
              class="item"
              :class="{
                active: swipeData[active]?.enumPictureCategory == key,
              }"
              >{{ getTitle(value[0].title) }}</span
            >
            <span v-if="swipeData[active]?.enumPictureCategory == key"
              >{{ getCategoryIndex(swipeData[active]) }}/{{ value.length }}</span
            >
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
const props = defineProps({
  swipeData: {
    type: Array,
    default: () => [],
  },
})

const swipeGroup = ref({})

watch(
  () => props.swipeData,
  (newVal) => {
    newVal.forEach((item) => {
      let valueArray = swipeGroup.value[item.enumPictureCategory]

      if (!valueArray) {
        valueArray = []
        swipeGroup.value[item.enumPictureCategory] = valueArray
      }
      valueArray.push(item)
    })
  },
  { immediate: true },
)
const nameReg = /【(.*?)】/i
const getTitle = (title) => {
  const result = title.match(nameReg)
  if (result && result.length > 1) {
    return result[1]
  }
  return title
}
const getCategoryIndex = (item) => {
  const valueArray = swipeGroup.value[item.enumPictureCategory]

  return valueArray.findIndex((data) => data === item) + 1
}
</script>

<style lang="scss" scoped>
.detail-swiper {
  .swiper {
    width: 100%;
    height: 300px;

    &-item {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.3);
      color: #fff;
      padding: 0px 5px;
      .item {
        margin: 0px 5px;
        &.active {
          background-color: var(--primary-color);
          padding: 0px 5px;
          border-radius: 5px;
        }
      }
    }
  }
}
</style>
